<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="The navigation view control provides a collapsible navigation menu for top-level navigation in your app. The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Navigation View - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Navigation View</a></li>
                    <li class="toc-entry"><a href="#_navview_about">About</a></li>
                    <li class="toc-entry"><a href="#_navview_structure">Structure</a></li>
                    <li class="toc-entry">
                        <a href="#_navview_pane">Navigation pane</a>
                        <ul>
                            <li class="toc-entry"><a href="#_navview_pane_pull-button">Pull button</a></li>
                            <li class="toc-entry"><a href="#_navview_pane_suggest-box">Suggest box</a></li>
                            <li class="toc-entry"><a href="#_navview_pane_menu">Menu</a></li>
                            <li class="toc-entry"><a href="#_navview_pane_menu-item">Menu item</a></li>
                            <li class="toc-entry"><a href="#_navview_pane_menu-header">Menu header</a></li>
                            <li class="toc-entry"><a href="#_navview_pane_separator">Separator</a></li>
                        </ul>
                    </li>
                    <li class="toc-entry"><a href="#_navview_content">Content area</a></li>
                    <li class="toc-entry"><a href="#_navview_pane-display-modes">Pane display modes</a></li>
                    <li class="toc-entry"><a href="#_navview_events">Events</a></li>
                    <li class="toc-entry"><a href="#_navview_methods">Methods</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Navigation View</h1>
                <p class="text-leader">
                    The navigation view control provides a collapsible navigation menu for top-level navigation in your app.
                </p>

                <!-- ads-html -->

                <h3 id="_navview_about">About</h3>
                <p>
                    The <code>navigation view</code> control provides a collapsible navigation menu for top-level navigation in your app.
                    This control implements the nav pane, or hamburger menu, pattern and automatically adapts the pane's display mode to different window sizes.
                    To create <code>navigation view</code> component you must define special structure and add role with attribute <code>data-role="navview"</code> to navigation view root.
                </p>

                <div class="example p-0" style="height: 500px;">
                    <div data-role="navview" data-compact="md" data-expand="lg" data-toggle="#pane-toggle" data-active-state="true">
                        <nav class="navview-pane">
                            <button class="pull-button">
                                <span class="mif-menu"></span>
                            </button>

                            <div class="suggest-box">
                                <input type="text" data-role="input" data-clear-button="false" data-search-button="true">
                                <button class="holder">
                                    <span class="mif-search"></span>
                                </button>
                            </div>

                            <ul class="navview-menu">
                                <li>
                                    <a href="#">
                                        <span class="icon"><span class="mif-home"></span></span>
                                        <span class="caption">Home</span>
                                    </a>
                                </li>

                                <li class="item-separator"></li>

                                <li class="item-header">Main pages</li>

                                <li>
                                    <a href="#">
                                        <span class="icon"><span class="mif-apps"></span></span>
                                        <span class="caption">Apps</span>
                                    </a>
                                </li>
                                <li class="active">
                                    <a href="#">
                                        <span class="icon"><span class="mif-gamepad"></span></span>
                                        <span class="caption">Games</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="icon"><span class="mif-envelop"></span></span>
                                        <span class="caption">Email</span>
                                        <div class="badges">
                                            <span class="badge inline">10</span>
                                            <span class="badge inline">5</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="dropdown-toggle">
                                        <span class="icon"><span class="mif-music"></span></span>
                                        <span class="caption">Music</span>
                                    </a>
                                    <ul class="navview-menu" data-role="dropdown">
                                        <li>
                                            <a href="#">
                                                <span class="icon"><span class="mif-gamepad"></span></span>
                                                <span class="caption">Games</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <span class="icon"><span class="mif-film"></span></span>
                                                <span class="caption">Movies</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="disabled">
                                    <a href="#">
                                        <span class="icon"><span class="mif-images"></span></span>
                                        <span class="caption">Images</span>
                                    </a>
                                </li>

                                <li class="item-separator"></li>

                                <li>
                                    <a href="#">
                                        <span class="icon"><span class="mif-folder"></span></span>
                                        <span class="caption">Documents</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>

                        <div class="navview-content pl-4-md pr-4-md">
                            <h1>
                                <button id="pane-toggle" class="button square d-none-md"><span class="mif-menu" ></span></button>
                                What is?
                            </h1>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </p>

                            <div data-role="panel"
                                 data-title-caption="Panel title"
                                 data-title-icon="<span class='mif-apps'></span>"
                                 data-width="240"
                                 data-collapsible="true"
                                 data-draggable="true">
                                Raptus capios ducunt ad genetrix. Joy doesn’t beautifully respect any believer — but the power is what flies.
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="navview"&gt;
                        ... valid navigation view structure ...
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_navview_structure">Structure</h3>
                <p>
                    The <code>navigation view</code> consists two main parts: <code>navigation pane</code> and <code>navigation content</code>.
                    The <code>pane</code> serves to display the menu and <code>content</code> to display main data.
                </p>
                <pre><code class="html">
                    &lt;div data-role="navview"&gt;
                        &lt;div class="navview-pane"&gt;
                        ...
                        &lt;/div&gt;

                        &lt;div class="navview-content"&gt;
                        ...
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_navview_pane">Navigation pane</h3>
                <p>
                    The navigation pane serves to display a menu and can consist next elements:
                        <code>pull button</code>,
                        <code>suggest box</code>,
                        <code>separator</code> and
                        <code>menu</code> with <code>menu items</code>.
                </p>

                <h4 id="_navview_pane_pull-button">Pull button</h4>
                <p>
                    The <code>pull button</code> serves for change size of navigation pane.
                </p>
                <div class="example p-0" style="height: 200px">
                    <div data-role="navview" data-expanded="fs" data-compact="false">
                        <div class="navview-pane">
                            <button class="pull-button">
                                <span class="default-icon-menu"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="navview-pane"&gt;
                        &lt;button class="pull-button"&gt;
                            &lt;span class="default-icon-menu"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                    &lt;/div&gt;
                </code></pre>

                <h4 id="_navview_pane_suggest-box">Suggest box</h4>
                <p>
                    The <code>suggest box</code> is intended for displaying input fields, for example, a field for searching and must consist <code>input field</code> and input <code>holder</code> for compact mode.
                </p>
                <div class="example p-0" style="height: 200px">
                    <div data-role="navview" data-expanded="fs" data-compact="false">
                        <div class="navview-pane">
                            <button class="pull-button">
                                <span class="default-icon-menu"></span>
                            </button>

                            <div class="suggest-box">
                                <input type="text" data-role="input" data-clear-button="false" data-search-button="true">
                                <button class="holder">
                                    <span class="mif-search"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="navview-pane"&gt;
                        &lt;div class="suggest-box"&gt;
                            &lt;input type="text" data-role="input" data-clear-button="false" data-search-button="true"&gt;
                            &lt;button class="holder"&gt;
                                &lt;span class="mif-search"&gt;&lt;/span&gt;
                            &lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h4 id="_navview_pane_menu">Menu</h4>
                <p>
                    For navigation you can create <code>navigation view menu</code>.
                    To create it use <code>&lt;ul&gt;</code> and list items with anchor.
                </p>
                <div class="example p-0" style="height: 300px;">
                    <div data-role="navview" data-expanded="fs" data-compact="false">
                        <div class="navview-pane">
                            <button class="pull-button">
                                <span class="default-icon-menu"></span>
                            </button>

                            <ul class="navview-menu">
                                <li class="item-header">Main pages</li>

                                <li>
                                    <a href="#">
                                        <span class="icon"><span class="mif-apps"></span></span>
                                        <span class="caption">Apps</span>
                                    </a>
                                </li>

                                <li class="item-separator"></li>

                                <li class="item-header">Office</li>

                                <li>
                                    <a href="#">
                                        <span class="icon"><span class="mif-file-word"></span></span>
                                        <span class="caption">Word</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="icon"><span class="mif-file-excel"></span></span>
                                        <span class="caption">Excel</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <h4 id="_navview_pane_menu-item">Menu item</h4>
                <p>
                    To create <code>menu item</code> use list item with anchor and two internal elements: icon and caption.
                </p>
                <pre><code class="html">
                    &lt;li&gt;
                        &lt;a href="#"&gt;
                            &lt;span class="icon"&gt;&lt;span class="mif-apps"&gt;&lt;/span&gt;&lt;/span&gt;
                            &lt;span class="caption"&gt;Apps&lt;/span&gt;
                            &lt;span class="badges"&gt;
                                &lt;span class="badge inline"&gt;11&lt;/span&gt;
                            &lt;/span&gt;
                        &lt;/a&gt;
                    &lt;/li&gt;
                </code></pre>

                <h4 id="_navview_pane_menu-header">Menu header</h4>
                <p>
                    You can precede each group of menu item with a special header element.
                </p>
                <pre><code class="html">
                    &lt;li class="item-header"&gt;Office&lt;/li&gt;
                </code></pre>

                <h4 id="_navview_pane_separator">Separator</h4>
                <p>
                    Between navigation pane elements you can insert <code>separator</code> to divide them.
                    To create <code>separator</code>, add element (example <code>&lt;div&gt;</code>) with class <code>.item-separator</code>.
                </p>
                <pre><code class="html">
                    &lt;ul class="navview-menu"&gt;
                        &lt;li class="item-header">Main pages&lt;/li&gt;

                        &lt;li&gt;
                            &lt;a href="#"&gt;
                                &lt;span class="icon"&gt;&lt;span class="mif-apps"&gt;&lt;/span&gt;&lt;/span&gt;
                                &lt;span class="caption"&gt;Apps&lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;

                        &lt;li class="item-separator"&gt;&lt;/li&gt;

                        &lt;li class="item-header"&gt;Office&lt;/li&gt;

                        &lt;li&gt;
                            &lt;a href="#"&gt;
                                &lt;span class="icon"&gt;&lt;span class="mif-file-word"&gt;&lt;/span&gt;&lt;/span&gt;
                                &lt;span class="caption"&gt;Word&lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href="#"&gt;
                                &lt;span class="icon"&gt;&lt;span class="mif-file-excel"&gt;&lt;/span&gt;&lt;/span&gt;
                                &lt;span class="caption"&gt;Excel&lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_navview_content">Content area</h3>
                <p>
                    To display main data you must use element with class <code>.navview-content</code>.
                </p>
                <div class="example p-0" style="height: 200px">
                    <div data-role="navview" data-expanded="md" data-compact="fs">
                        <div class="navview-pane">
                            <button class="pull-button">
                                <span class="default-icon-menu"></span>
                            </button>
                        </div>

                        <div class="navview-content d-flex flex-align-center flex-justify-center h-100">
                            ... This is navigation view content area ...
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="navview"&gt;
                        &lt;div class="navview-pane"&gt;
                            &lt;button class="pull-button"&gt;
                                &lt;span class="default-icon-menu"&gt;&lt;/span&gt;
                            &lt;/button&gt;
                        &lt;/div&gt;

                        &lt;div class="navview-content d-flex flex-align-center flex-justify-center h-100"&gt;
                            ... This is navigation view content area ...
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_navview_pane-display-modes">Pane display modes</h3>
                <p>
                    You can define behavior of navigation view pane with attributes <code>data-compact</code> and <code>data-expand</code>.
                    Values for these attributes must be a set of:
                </p>
                <ul>
                    <li><code>fs</code> - min-with: 0px</li>
                    <li><code>sm</code> - min-with: 576px</li>
                    <li><code>md</code> - min-with: 768px</li>
                    <li><code>lg</code> - min-with: 992px</li>
                    <li><code>xl</code> - min-with: 1200px</li>
                    <li><code>xxl</code> - min-with: 1452px</li>
                </ul>
                <p>
                    By default used <code>md</code> for compact and <code>lg</code> for expanded mode.
                </p>
                <pre><code class="html">
                    &lt;div data-role="navview" data-expand="lg" data-compact="md"&gt;...&lt;/div&gt;
                    &lt;div data-role="navview" data-expand="fs" data-compact="false"&gt;...&lt;/div&gt;
                </code></pre>

                <h3 id="_navview_events">Events</h3>
                <p>
                    When navigation view works, it generated a number of events. You can use callbacks to these events to interact with it.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Events</th>
                        <th>Data-*</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>onMenuItemClick(elem)</code></td>
                        <td><code>data-on-menu-item-click</code></td>
                        <td>Fired when user click on navviwe menu item</td>
                    </tr>
                    <tr>
                        <td><code>onNavViewCreate(elem)</code></td>
                        <td><code>data-on-nav-view-create</code></td>
                        <td>Fired when navigation view was created</td>
                    </tr>
                    </tbody>
                </table>

                <h3 id="_navview_methods">Methods</h3>
                <p>
                    To interact with component you can use navview methods.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Method</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>open()</code></td>
                        <td>Use this method to open navigation view pane</td>
                    </tr>
                    <tr>
                        <td><code>close()</code></td>
                        <td>Use this method to close navigation view pane</td>
                    </tr>
                    <tr>
                        <td><code>toggle()</code></td>
                        <td>Use this method to toggle open/close navigation view pane</td>
                    </tr>
                    </tbody>
                </table>
                <pre><code>
                    var nv = $("#navview1").data("navview");
                    nv.open();
                    nv.close();
                </code></pre>
            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>